import React from 'react';
import ReactDOM from 'react-dom';

function EffectHooks() {

    const [count, setCount] = React.useState(0)

    // 不带[]表示全监控，带[]表示都不监控，[count]监听指定属性的变化
    React.useEffect(() => {
        let timer = setInterval(() => {
            setCount(count => count + 1)
        }, 1000)

        // 卸载组件时清除定时器
        return () => {
            clearInterval(timer)
        }
    }, [])

    // 卸载组件
    function unmount() {
        ReactDOM.unmountComponentAtNode(document.getElementById("root"))
    }

    return (
        <div>
            <h3> Timing: {count}</h3>
            <button onClick={unmount}> delete Component</button>
        </div>
    )
}

export default EffectHooks;